<template>
  <view class="user-container">
    <!-- 返回首页按钮 - 使用navigateTo -->
    <view class="back-home-btn" @click="goToHome">
      <uni-icons type="home" size="24" color="white"></uni-icons>
      <text>返回首页</text>
    </view>
    
    <!-- 用户信息头部 -->
    <view class="user-header" @click="editAvatar">
      <image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
      <view class="user-meta">
        <text class="username">{{ userInfo.nickname || '游客' }}</text>
        <text class="user-id">ID: {{ userInfo.userId }}</text>
        <view class="member-tag" v-if="userInfo.vipLevel">
          <uni-icons type="vip" size="16" color="#ffd700"></uni-icons>
          <text>黄金会员</text>
        </view>
      </view>
      <uni-icons type="forward" size="20" color="#999"></uni-icons>
    </view>

    <!-- 账户安全卡片 -->
    <view class="security-card">
      <text class="card-title">账户安全</text>
      <view class="security-item" @click="navigateTo('/pages/user/change-pwd')">
        <view class="item-left">
          <uni-icons type="locked" size="20" color="#4a8cff"></uni-icons>
          <text>登录密码</text>
        </view>
        <view class="item-right">
          <text class="status-text">已设置</text>
          <uni-icons type="forward" size="18" color="#ccc"></uni-icons>
        </view>
      </view>
      <view class="security-item" @click="showEmailDialog = true">
        <view class="item-left">
          <uni-icons type="email" size="20" color="#4a8cff"></uni-icons>
          <text>邮箱绑定</text>
        </view>
        <view class="item-right">
          <text class="status-text">{{ userInfo.email || '未绑定' }}</text>
          <uni-icons type="forward" size="18" color="#ccc"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 偏好设置卡片 -->
    <view class="preference-card">
      <text class="card-title">偏好设置</text>
      <view class="preference-item">
        <text>主题模式</text>
        <switch :checked="theme === 'dark'" @change="toggleTheme" color="#4a8cff" />
      </view>
      <view class="preference-item" @click="editTravelPreference">
        <text>旅行偏好</text>
        <view class="tags-container">
          <text class="tag" v-for="tag in userInfo.preferences" :key="tag">{{ tag }}</text>
          <uni-icons type="forward" size="18" color="#ccc"></uni-icons>
        </view>
      </view>
      <view class="preference-item">
        <text>消息通知</text>
        <switch :checked="notificationEnabled" @change="toggleNotification" color="#4a8cff" />
      </view>
    </view>

    <!-- 操作按钮区 -->
    <view class="action-buttons">
      <button class="btn" @click="logout">退出登录</button>
      <button class="btn btn-feedback" @click="navigateTo('/pages/feedback')">意见反馈</button>
    </view>

    <!-- 绑定邮箱弹窗 -->
    <uni-popup ref="emailPopup" type="dialog">
      <uni-popup-dialog 
        mode="input" 
        title="绑定邮箱" 
        placeholder="请输入邮箱地址"
        :value="userInfo.email"
        @confirm="submitEmail"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// 用户数据
const userInfo = reactive({
  userId: '10086',
  nickname: '旅行达人',
  avatar: '',
  email: '',
  vipLevel: 1,
  preferences: ['海滨度假', '历史古迹']
})

// 系统状态
const theme = ref('light')
const notificationEnabled = ref(true)
const showEmailDialog = ref(false)
const emailPopup = ref(null)

// 方法定义
const maskPhone = (phone) => {
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

const editAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      userInfo.avatar = res.tempFilePaths[0]
    }
  })
}

const submitEmail = (email) => {
  if (!/^\w+@\w+\.\w+$/.test(email)) {
    uni.showToast({ title: '邮箱格式错误', icon: 'none' })
    return
  }
  userInfo.email = email
  uni.showToast({ title: '绑定成功' })
}

const toggleTheme = (e) => {
  theme.value = e.detail.value ? 'dark' : 'light'
}

const toggleNotification = (e) => {
  notificationEnabled.value = e.detail.value
  uni.showToast({
    title: e.detail.value ? '通知已开启' : '通知已关闭',
    icon: 'none'
  })
}

const editTravelPreference = () => {
  uni.navigateTo({
    url: '/pages/user/preference-edit'
  })
}

const logout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出当前账号吗？',
    success: (res) => {
      if (res.confirm) {
        uni.reLaunch({ url: '/pages/login' })
      }
    }
  })
}

const navigateTo = (url) => {
  uni.navigateTo({ url })
}

// 简化的返回首页方法 - 只使用navigateTo
const goToHome = () => {
  uni.navigateTo({
    url: '/pages/home/home',
    success: () => {
      console.log('成功跳转到首页')
    },
    fail: (err) => {
      console.error('跳转首页失败:', err)
      uni.showToast({
        title: '跳转失败',
        icon: 'error',
        duration: 2000
      })
    }
  })
}

onShow(() => {
  // 页面显示时刷新用户数据
})
</script>

<style lang="scss">
$primary-color: #4a8cff;
$page-bg-color: #f5f7fa;
$text-color: #333;
$text-secondary: #666;
$border-color: #f5f5f5;
$tag-bg-color: #e6f0ff;

.user-container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: $page-bg-color;
}

.back-home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15rpx 30rpx;
  background: linear-gradient(135deg, #4a8cff 0%, #6ba3ff 100%);
  border-radius: 50rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 20rpx rgba(74, 140, 255, 0.3);
  position: absolute; // 修改为absolute
  top: 20rpx; // 调整为页面顶部
  left: 30rpx; // 调整为页面左侧
  z-index: 10;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 12rpx rgba(74, 140, 255, 0.2);
  }
  
  text {
    margin-left: 10rpx;
    font-size: 26rpx;
    color: white;
    font-weight: 500;
  }
}

.user-header {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background: white;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  margin-top: 80rpx;
  
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 30rpx;
    border: 2rpx solid #f0f0f0;
  }
  
  .user-meta {
    flex: 1;
    
    .username {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
      color: $text-color;
    }
    
    .user-id {
      font-size: 24rpx;
      color: $text-secondary;
    }
    
    .member-tag {
      display: inline-flex;
      align-items: center;
      background: #fff8e6;
      color: #ffb100;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      font-size: 22rpx;
      margin-top: 10rpx;
      
      text {
        margin-left: 6rpx;
      }
    }
  }
}

.security-card, .preference-card {
  background: white;
  border-radius: 16rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  
  .card-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    padding: 30rpx 0 20rpx;
    border-bottom: 1rpx solid $border-color;
    color: $text-color;
  }
}

.security-item, .preference-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid $border-color;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-left {
    display: flex;
    align-items: center;
    
    text {
      margin-left: 20rpx;
      color: $text-color;
    }
  }
  
  .item-right {
    display: flex;
    align-items: center;
    
    .status-text {
      color: $text-secondary;
      margin-right: 10rpx;
    }
  }
}

.preference-item {
  .tags-container {
    display: flex;
    align-items: center;
    
    .tag {
      background: $tag-bg-color;
      color: $primary-color;
      padding: 6rpx 16rpx;
      border-radius: 6rpx;
      font-size: 24rpx;
      margin-right: 10rpx;
    }
  }
}

.action-buttons {
  margin-top: 50rpx;
  
  .btn {
    background: white;
    color: $text-color;
    border-radius: 50rpx;
    margin-bottom: 30rpx;
    border: none;
    
    &::after {
      border: none;
    }
    
    &.btn-feedback {
      background: $primary-color;
      color: white;
    }
  }
}
</style>